<template>
  <div>
    <el-page-header @back="goBack"></el-page-header>
    <el-card body-style="margin-bottom:10px">
      <div class="basic-info">
        <div class="t">
          <div class="nickname">
            {{ info.nickName ? info.nickName : "-" }}
          </div>
          <div class="status" :class="info.disabled ? 'dis' : ''">
            {{ info.disabled ? "已冻结" : "正常" }}
          </div>
          <div class="userid">用户ID：{{ info.userNo }}</div>
          <!-- <el-form label-position="top">
            <el-row :gutter="100">
              <el-col :span="12">
                <el-form-item label="用户ID">
                  <el-input v-model="info.memberNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="昵称">
                  <el-input
                    v-model="info.memberName"
                    disabled
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="100">
              <el-col :span="12"
                ><el-form-item label="创建时间">
                  <el-input
                    v-model="info.gmtCreated"
                    disabled
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
          </el-form> -->
        </div>
        <div class="b">
          <el-row>
            <el-col :span="7">
              <div class="item">
                <div class="l">
                  <img src="@/assets/imgs/setting/name.png" alt="" />
                </div>
                <div class="r">
                  <div class="tit">姓名</div>
                  <div class="con">
                    {{ info.userName ? info.userName : "-" }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="item">
                <div class="l">
                  <img src="@/assets/imgs/setting/idcard.png" alt="" />
                </div>
                <div class="r">
                  <div class="tit">身份证号</div>
                  <div class="con">
                    {{ info.identifyId ? info.identifyId : "-" }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card body-style="margin-bottom:10px">
      <div class="account-info">
        <div class="t">
          <div class="nickname">账户详情</div>
        </div>
        <div class="b">
          <el-row>
            <el-col :span="7">
              <div class="item">
                <div class="l">
                  <img src="@/assets/imgs/setting/icon_wallet.png" alt="" />
                </div>
                <div class="r">
                  <div class="tit">账户余额</div>
                  <div class="con" v-if="info.balance">
                    ¥ {{ info.balance }}
                  </div>
                  <div class="con" v-else>-</div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="item">
                <div class="l">
                  <img src="@/assets/imgs/setting/icon_withdrawal.png" alt="" />
                </div>
                <div class="r">
                  <div class="tit">可提现余额</div>
                  <div class="con" v-if="info.withdrawableBalance">
                    ¥ {{ info.withdrawableBalance }}
                  </div>
                  <div class="con" v-else>-</div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="item">
                <div class="l">
                  <img src="@/assets/imgs/setting/icon_donate.png" alt="" />
                </div>
                <div class="r">
                  <div class="tit">赠送余额</div>
                  <div class="con" v-if="info.giveBalance">
                    ¥ {{ info.giveBalance }}
                  </div>
                  <div class="con" v-else>-</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card body-style="margin-bottom:10px" class="coupon-wrap">
      <div class="coupon-info">
        <div class="t">
          <div class="tit">优惠券</div>
          <div class="switch">
            <div class="timeCycle">
              <div
                :class="timeCycleVal == 0 ? 'activeTime' : ''"
                @click="handleTimeCycle(0)"
              >
                未使用
              </div>
              <div
                :class="timeCycleVal == 1 ? 'activeTime' : ''"
                @click="handleTimeCycle(1)"
              >
                已失效
              </div>
            </div>
          </div>
        </div>
        <div class="b">
          <div class="l">
            <div class="cou-list" v-if="timeCycleVal == 0">
              <div v-if="couponUseShowIssueds.length > 0">
                <div
                  class="item"
                  v-for="item of couponUseShowIssueds"
                  :key="item.id"
                >
                  <div class="left">
                    {{ item.templateCouponType === 1 ? "折扣" : "现金" }}券
                  </div>
                  <div class="right">
                    <div class="type1" v-if="item.templateCouponType != 1">
                      <div class="tip">
                        {{
                          item.templateUsingLimit === 1
                            ? "无门槛"
                            : "满" + item.fmtTemplateLimitAmount + "元可用"
                        }}
                      </div>
                      <div class="amount">
                        <span class="ll">¥</span>
                        <span
                          class="rr"
                          :style="{
                            fontSize:
                              item.fmtTemplateCouponAmount >= 100 ? '20px' : '',
                          }"
                          >{{ item.fmtTemplateCouponAmount }}</span
                        >
                      </div>
                    </div>
                    <div class="type2" v-else>
                      <div class="tip">
                        {{
                          item.templateUsingLimit === 1
                            ? "无门槛"
                            : "满" + item.fmtTemplateLimitAmount + "元可用"
                        }}
                      </div>
                      <div class="amount">
                        <span class="ll">{{
                          parseFloat(item.fmtTemplateCouponAmount).toFixed(1)
                        }}</span>
                        <span class="rr">折</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>暂无数据</div>
            </div>
            <div class="cou-list outTime" v-else>
              <div v-if="couponOutIssueds.length > 0">
                <div
                  class="item"
                  v-for="item of couponOutIssueds"
                  :key="item.id"
                >
                  <div class="left">
                    {{ item.templateCouponType === 1 ? "折扣" : "现金" }}券
                  </div>
                  <div class="right">
                    <div class="type1" v-if="item.templateCouponType != 1">
                      <div class="tip">
                        {{
                          item.templateUsingLimit === 1
                            ? "无门槛"
                            : "满" + item.fmtTemplateLimitAmount + "元可用"
                        }}
                      </div>
                      <div class="amount">
                        <span class="ll">¥</span>
                        <span
                          class="rr"
                          :style="{
                            fontSize:
                              item.fmtTemplateCouponAmount >= 100 ? '20px' : '',
                          }"
                          >{{ item.fmtTemplateCouponAmount }}</span
                        >
                      </div>
                    </div>
                    <div class="type2" v-else>
                      <div class="tip">
                        {{
                          item.templateUsingLimit === 1
                            ? "无门槛"
                            : "满" + item.fmtTemplateLimitAmount + "元可用"
                        }}
                      </div>
                      <div class="amount">
                        <span class="ll">{{
                          parseFloat(item.fmtTemplateCouponAmount).toFixed(1)
                        }}</span>
                        <span class="rr">折</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>暂无数据</div>
            </div>
          </div>
          <div
            class="r"
            v-if="timeCycleVal == 0 && couponUseIssueds.length > 5"
          >
            <div class="btn-more" @click="showMore">
              {{ btnType == 0 ? "查看更多" : "收起" }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card body-style="margin-bottom:10px">
      <div class="collect-info">
        <div class="t">
          <div class="nickname">收款账户</div>
        </div>
        <div class="b">
          <span class="noData" v-if="info.payChannels?.length == 0"
            >暂未配置任何收款账户</span
          >
          <div v-else>
            <div
              class="item"
              v-for="(item, index) of calcChannel(info.payChannels)"
              :key="index"
            >
              <span class="tit">{{ item.name }}</span>
              <div class="list">
                <div class="item" v-for="(item, idx) of item.info" :key="idx">
                  {{ item.name }} : {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="deal-info">
        <div class="t">
          <div class="nickname">交易记录</div>
        </div>
        <div class="b">
          <el-table :data="dataList">
            <template slot="empty">
              <el-empty
                :image="require('@/assets/imgs/middleWork/k1.png')"
                :image-size="80"
                description="暂无相关数据"
              ></el-empty>
            </template>
            <el-table-column
              show-overflow-tooltip
              prop="gmtCreated"
              align="center"
              label="创建时间"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              show-overflow-tooltip
              prop="payTime"
              align="center"
              label="支付时间"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.payTime ? scope.row.payTime : "-" }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="payformNo"
              align="center"
              label="商户订单号"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.merchantOrderNo ? scope.row.merchantOrderNo : "-"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="payformNo"
              align="center"
              label="云尘付流水号"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.innerOrderNo ? scope.row.innerOrderNo : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="payformNo"
              align="center"
              label="交易类型"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.sourceTypeName ? scope.row.sourceTypeName : "-"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="payformNo"
              align="center"
              label="交易状态"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.statusName ? scope.row.statusName : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="fmtActualAmount"
              align="center"
              label="交易金额/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.fmtActualAmount
                      ? scope.row.fmtActualAmount
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="payformNo"
              align="center"
              label="备注"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.description ? scope.row.description : "-" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              show-overflow-tooltip
              prop="subject"
              align="center"
              label="商品名称"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.subject ? scope.row.subject : "-" }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="fmtActualAmount"
              align="center"
              label="支付金额/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.fmtActualAmount
                      ? scope.row.fmtActualAmount
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="fmtFeeAmount"
              align="center"
              label="支付手续费/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.fmtFeeAmount ? scope.row.fmtFeeAmount : "0.00" }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="payStatus"
              align="center"
              label="支付状态"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ setPayStatus(scope.row.payStatus) }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="payformChannel"
              align="center"
              label="支付渠道"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  <span>{{
                    scope.row.payformChannel == "ada"
                      ? "汇付" + scope.row.payTypeName
                      : scope.row.payTypeName
                  }}</span>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="settleMode"
              align="center"
              label="分账模式"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.settleMode === "no_settle"
                      ? "无分账"
                      : scope.row.settleMode === "delay_settle"
                      ? "延时分账"
                      : "实时分账"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="refundState"
              align="center"
              label="退款情况"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.refundState === "no_refund"
                      ? "无退款"
                      : scope.row.refundState === "part_refund"
                      ? "部分退款"
                      : "全额退款"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="fmtRefundAmount"
              align="center"
              label="退款金额/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.fmtRefundAmount
                      ? scope.row.fmtRefundAmount
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="fmtRefundFeeAmount"
              align="center"
              label="退款手续费/元"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.fmtRefundFeeAmount
                      ? scope.row.fmtRefundFeeAmount
                      : "0.00"
                  }}
                </div>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            layout="prev, pager, next, sizes, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            :current-page="1"
            :total="total"
            @current-change="pageCurrentChangeHandle"
            @size-change="pageSizeChangeHandle"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!-- <div class="wrap">
      <div class="title" style="margin-bottom: 30px">基本信息</div>
      <el-row :gutter="100">
        <el-col :span="12"> </el-col>

        <el-col :span="12">
          <div class="infoBox">
            <div class="flex asset">
              <div>
                <div class="text">账户余额</div>
                <div class="number">{{ info.balance || "-" }}</div>
              </div>
              <div>
                <div class="text">可用金额</div>
                <div class="number">{{ info.avlBalance || "-" }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div>
        优惠券<span class="canUse">{{ info.couponValidNum }}张可用</span>
      </div>
      <div class="discountWrap">
        <div
          class="discount"
          v-for="item of info.couponIssueds || []"
          :key="item.id"
        >
          <div>
            <div>
              <span class="type">{{
                item.templateCouponType === 1 ? "折扣" : "现金"
              }}</span>
              <span
                class="type"
                :style="{ background: item.status !== 1 ? 'red' : '#44E3B1' }"
                >{{
                  item.status === 3
                    ? "已使用"
                    : item.status === 2
                    ? "已过期"
                    : item.status === 1
                    ? "未使用"
                    : ""
                }}</span
              >
              <span class="name" :title="item.templateName">{{
                item.templateName
              }}</span>
            </div>
            <div class="company">{{ item.memberName }}</div>
            <div>
              {{
                item.templateExpiresType === 2
                  ? "领取后" + item.templateExpiresDay + "日内使用"
                  : item.templateExpiresStart + "至" + item.templateExpiresEnd
              }}
            </div>
          </div>
          <div>
            <div class="numWrap">
              <span class="num">{{ item.fmtTemplateCouponAmount }}</span
              >{{ item.templateCouponType === 1 ? "%" : "元" }}
            </div>
            <div class="numLimit">
              {{
                item.templateUsingLimit === 1
                  ? "无门槛"
                  : "满" + item.fmtTemplateLimitAmount + "元可用"
              }}
            </div>
          </div>
          <div>
            <div class="company">{{ item.memberName }}</div>
          </div>
        </div>
      </div>
      <div class="title" style="margin: 30px 0">交易流水</div>
    </div> -->
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
export default {
  name: "userInfo",
  mixins: [mixin],
  data() {
    return {
      btnType: 0,
      timeCycleVal: 0,
      dataForm: { userId: "" },
      value1: "",
      info: {
        couponIssueds: [],
      },
      couponUseShowIssueds: [], //未过期-首行
      couponUseIssueds: [], //未过期
      couponOutIssueds: [], //已过期,已失效
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/memberuser/getMemberUserWaterOrderPage",
        createdIsNeed: false,
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    this.$http
      .get("/api/merchant/memberuser/get", {
        params: { id },
      })
      .then((res) => {
        if (res.code === "0000") {
          console.log(res.data);
          this.info = res.data;
          this.couponUseIssueds =
            this.info.couponIssueds &&
            this.info.couponIssueds.filter((item) => item.status == 1);
          if (this.couponUseIssueds.length <= 5) {
            this.couponUseShowIssueds = this.couponUseIssueds;
          } else {
            this.couponUseShowIssueds = this.couponUseIssueds.slice(0, 5);
          }

          this.couponOutIssueds =
            this.info.couponIssueds &&
            this.info.couponIssueds.filter(
              (item) => item.status == 2 || item.status == 3
            );
          // console.log(this.couponUseIssueds);
          // console.log(this.couponUseShowIssueds);
          // console.log(this.couponOutIssueds);
          this.dataForm.userId = id;
          this.getDataList();
        }
      });
  },
  methods: {
    calcChannel(list) {
      let list1 = list?.filter(
        (item) => item.info && Object.keys(item.info).length > 0
      );
      let listc = JSON.parse(JSON.stringify(list1 || []));
      listc.map((item) => {
        let keyList = Object.keys(item.info);
        var arr = [];

        keyList.forEach((key) => {
          switch (item.type) {
            case "ali":
              if (key == "ali_account_name") {
                arr.push({
                  name: "账号名称",
                  value: item.info[key],
                });
              }
              if (key == "ali_member_id") {
                arr.push({
                  name: "支付宝账号",
                  value: item.info[key],
                });
              }
              break;
            case "wechat_lite":
            case "wechat_jsapi":
            case "wechat_app":
              switch (key) {
                case "wechat_lite_account_name":
                case "wechat_jsapi_account_name":
                case "wechat_app_account_name":
                  arr.unshift({
                    name: "账号名称",
                    value: item.info[key],
                  });
                  break;
                case "wechat_lite_member_id":
                case "wechat_jsapi_member_id":
                case "wechat_app_member_id":
                  arr.push({
                    name:
                      item.account_type == "MERCHANT_ID"
                        ? "微信商户号"
                        : "用户OpenID",
                    value: item.info[key],
                  });
                  break;
              }
              break;
            case "ada":
              if (key == "ada_member_id") {
                arr.push({
                  name: "渠道商户ID",
                  value: item.info[key],
                });
              }
              break;
            case "douyin":
              if (key == "douyin_member_id") {
                arr.push({
                  name: "渠道商户ID",
                  value: item.info[key],
                });
              }
              break;
          }
        });
        item.info = arr;
        return item;
      });
      return listc;
    },
    showMore() {
      if (this.btnType == 0) {
        this.btnType = 1;
        this.couponUseShowIssueds = this.couponUseIssueds;
      } else {
        this.btnType = 0;
        this.couponUseShowIssueds = this.couponUseIssueds.slice(0, 5);
      }
    },
    handleTimeCycle(val) {
      if (val !== this.timeCycleVal) {
        this.timeCycleVal = val;
      }
    },
    setPayStatus(val) {
      let str = "";
      switch (val) {
        case "expire_pay":
          str = "支付超时";
          break;
        case "wait_pay":
          str = "待支付";
          break;
        case "success_pay":
          str = "支付成功";
          break;
        case "fail_pay":
          str = "支付失败";
          break;
        case "cancel_pay":
          str = "已取消";
          break;
      }
      return str;
    },
    setRefundStatus(val) {
      let str = "";
      switch (val) {
        case "wait_approval":
          str = "待审核";
          break;
        case "fail_approval":
          str = "审核拒绝";
          break;
        case "wait_refund":
          str = "待退款";
          break;
        case "success_refund":
          str = "退款成功";
          break;
        case "fail_refund":
          str = "退款失败";
          break;
      }
      return str;
    },
    goBack() {
      this.$backTo(`/user`);
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-wrap {
  :deep(.el-card__body) {
    padding-bottom: 10px;
  }
}
.basic-info {
  padding: 17px 22px;
  .t {
    width: 100%;
    border-bottom: 1px dashed #d8d8d8;
    display: flex;
    align-items: center;
    padding-bottom: 45px;
    .nickname {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      line-height: 33px;
      margin-right: 20px;
    }
    .status {
      padding: 4px 11px;
      background: rgba(7, 165, 85, 0.1);
      border-radius: 4px;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #07a555;
      // line-height: 24px;
      margin-right: 30px;
      &.dis {
        background: rgba(226, 61, 40, 0.1);
        color: #e23d28;
      }
    }
    .userid {
      height: 34px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #d8d8d8;
      padding: 7px 13px;

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7a8287;
    }
  }
  .b {
    margin-top: 30px;
    .item {
      display: flex;
      align-items: center;
      .l {
        margin-right: 30px;
      }
      .r {
        .tit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-bottom: 8px;
        }
        .con {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d1c1c;
        }
      }
    }
  }
}

.account-info {
  padding: 13px 22px;
  .t {
    .nickname {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
    }
  }
  .b {
    margin-top: 28px;
    .item {
      display: flex;
      align-items: center;
      .l {
        margin-right: 30px;
      }
      .r {
        .tit {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #869daa;
          margin-bottom: 3px;
        }
        .con {
          font-size: 20px;
          font-family: GothamSSm-Medium, GothamSSm;
          font-weight: 500;
          color: #4f595f;
        }
      }
    }
  }
}
.coupon-info {
  padding: 6px 22px;
  padding-bottom: 0;
  .t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tit {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
    }
    .switch {
      // position: relative;
      .timeCycle {
        width: 115px;
        // line-height: 26px;
        // height: 23px;
        display: flex;
        border: 1px solid #f0f0f0;
        border-radius: 16px;
        padding: 3px;
        div {
          flex: 1;
          text-align: center;
          border-radius: 16px;
          color: #bfbfbf;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          padding: 2px 0;
        }
        .activeTime {
          background: #3fbbbc;
          color: #fff;
          padding: 2px 0;
          box-shadow: 5px 5px 10px 0px rgba(63, 187, 188, 0.25);
        }
      }
    }
  }
  .b {
    position: relative;
    margin-top: 25px;
    .l {
      height: auto;
      flex: 1;
      padding-right: 139px;

      .cou-list {
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 264px;
          height: 95px;
          background: url(@/assets/imgs/setting/cou1.png) no-repeat center
            center;
          margin-right: 28px;
          margin-bottom: 20px;
          display: flex;
          .left {
            width: 103px;
            height: inherit;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1d1c1c;
            line-height: 95px;
            padding-left: 28px;
            // text-align: center;
          }
          .right {
            width: 159px;
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            .type1 {
              .tip {
                font-size: 10px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                margin-bottom: 5px;
              }
              .amount {
                display: flex;
                align-items: flex-start;
                .ll {
                  font-size: 12px;
                  font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold,
                    ToppanBunkyuMidashiMinchoStdN;
                  font-weight: 800;
                  color: #1d1c1c;
                  margin-top: 4px;
                  margin-right: 8px;
                }
                .rr {
                  font-size: 40px;
                  font-family: GothamSSm-Book, GothamSSm;
                  font-weight: normal;
                  color: #1d1c1c;
                }
              }
            }
            .type2 {
              .tip {
                font-size: 10px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                margin-bottom: 5px;
              }
              .amount {
                display: flex;
                align-items: flex-end;
                .ll {
                  font-size: 40px;
                  font-family: GothamSSm-Book, GothamSSm;
                  font-weight: normal;
                  color: #1d1c1c;
                  margin-right: 5px;
                }
                .rr {
                  font-size: 12px;
                  font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold,
                    ToppanBunkyuMidashiMinchoStdN;
                  font-weight: 800;
                  color: #1d1c1c;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
        &.outTime {
          .item {
            background: url(@/assets/imgs/setting/cou2.png) no-repeat center
              center;
            .left {
              opacity: 0.5;
            }
            .right {
              .type1 {
                .tip {
                  opacity: 0.5;
                }
                .amount {
                  .ll {
                    opacity: 0.5;
                  }
                  .rr {
                    opacity: 0.5;
                  }
                }
              }
              .type2 {
                .tip {
                  opacity: 0.5;
                }
                .amount {
                  .ll {
                    opacity: 0.5;
                  }
                  .rr {
                    opacity: 0.5;
                  }
                }
              }
            }
          }
        }
      }
    }
    .r {
      position: absolute;
      top: 0;
      right: 0;
      .btn-more {
        width: 139px;
        height: 95px;
        line-height: 95px;
        background: #f6f6f6;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}

.collect-info {
  padding: 13px 22px;
  padding-bottom: 0;
  .t {
    .nickname {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
    }
  }
  .b {
    margin-top: 28px;
    .item {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      margin-bottom: 15px;
      .tit {
        display: inline-block;
        width: 145px;
        margin-right: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .list {
        .item {
          display: inline-block;
          margin-right: 15px;
          margin-bottom: 0;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d1c1c;
        }
      }
    }
  }
}
.deal-info {
  padding: 13px 22px;
  .t {
    .nickname {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
    }
  }
  .b {
    margin-top: 28px;
  }
}

// .wrap {
//   background: #fff;
//   padding: 34px 0 37px 34px;
//   color: #666666;
//   margin-top: 20px;
//   overflow-x: hidden;
//   min-width: 1200px;
//   .title {
//     color: #4f595f;
//     position: relative;
//     font-size: 24px;
//     font-weight: 600;
//     &::before {
//       content: "";
//       width: 4px;
//       height: 24px;
//       background: #03bfc6;
//       position: absolute;
//       left: -34px;
//       top: 7px;
//     }
//   }
//   .infoBox {
//     width: 390px;
//     height: 219px;
//     background: #03bfc6;
//     box-shadow: 0px 6px 0px 0px rgba(37, 181, 217, 0.19);
//     border-radius: 16px;
//     padding: 22px 30px;
//     color: #fff;
//     .flex {
//       display: flex;
//       justify-content: space-between;
//     }
//     .asset {
//       padding-right: 40px;
//     }
//     .text {
//       margin-top: 52px;
//       margin-bottom: 5px;
//     }
//     .number {
//       font-size: 24px;
//       font-weight: bold;
//     }
//     .user {
//       color: #1d1c1c;
//       margin-top: 44px;
//     }
//   }
//   .canUse {
//     color: #25b5d9;
//     margin-left: 40px;
//   }
//   .discountWrap {
//     display: flex;
//     flex-wrap: wrap;
//     margin-top: 16px;
//     .discount {
//       width: 260px;
//       height: 97px;
//       background: #f7fcf9;
//       border-radius: 4px;
//       border: 1px solid #ebf0ea;
//       margin-right: 30px;
//       padding: 10px 12px 0;
//       margin-bottom: 24px;
//       display: flex;
//       justify-content: space-between;
//       color: #869daa;
//       font-size: 12px;
//       .type {
//         display: inline-block;
//         background: #44e3b1;
//         border-radius: 2px;
//         padding: 2px 5px;
//         color: #166b50;
//         margin-right: 10px;
//         vertical-align: middle;
//       }
//       .name {
//         font-size: 20px;
//         font-weight: bold;
//         color: #1d1c1c;
//         vertical-align: middle;
//         display: inline-block;
//         overflow: hidden;
//         white-space: nowrap;
//         text-overflow: ellipsis;
//         width: 120px;
//       }
//       .company {
//         margin-top: 10px;
//         margin-bottom: 5px;
//       }
//       .numWrap {
//         width: 120px;
//         text-align: right;
//         color: #1d1c1c;
//         margin-top: 0px;
//         margin-bottom: 3px;
//         .num {
//           font-size: 20px;
//           font-weight: bold;
//         }
//       }
//       .numLimit {
//         text-align: right;

//         margin-top: 10px;
//       }
//     }
//   }
// }
</style>
